<template>
  <div class="min-h-screen bg-gray-100">
    <!-- 侧边栏 -->
    <aside class="sidebar fixed top-0 left-0 h-full bg-gray-900 text-white p-6">
      <div class="flex items-center space-x-3 mb-10">
        <font-awesome-icon icon="paw" class="text-3xl text-indigo-400" />
        <h1 class="text-xl font-bold">宠物商城管理系统</h1>
      </div>
      <nav class="space-y-1 flex-grow">
        <router-link
          v-for="item in navigationItems"
          :key="item.path"
          :to="item.path"
          class="nav-item flex items-center px-4 py-3 text-gray-300 hover:text-white rounded-lg"
          :class="{ 'active-nav': $route.path === item.path }"
        >
          <font-awesome-icon :icon="item.icon.split(' ')[1]" class="w-6" style="margin-right: 20px;" />
          <span class="ml-3">{{ item.name }}</span>
        </router-link>
      </nav>
      <!-- Logout Button Container -->
      <div class="logout-button-container mt-auto mx-6">
        <button
          @click="handleLogout"
          class="w-full flex items-center justify-center px-4 py-3 bg-red-600 text-white rounded-lg hover:bg-red-700 transition-colors"
        >
          <font-awesome-icon icon="sign-out-alt" class="mr-2" />
          退出登录
        </button>
      </div>
    </aside>

    <!-- 主要内容区域 -->
    <main class="main-content min-h-screen p-8">
      <slot></slot>
    </main>
  </div>
</template>

<script setup>
import { useRouter } from 'vue-router'
import { useAuthStore } from '../stores/auth'

const router = useRouter()
const authStore = useAuthStore()

const navigationItems = [
  { name: '控制台', path: '/dashboard', icon: 'fas fa-chart-line' },
  { name: '宠物管理', path: '/pets', icon: 'fas fa-dog' },
  { name: '商品管理', path: '/products', icon: 'fas fa-box' },
  { name: '购物车', path: '/cart', icon: 'fas fa-shopping-cart' },
  { name: '订单管理', path: '/orders', icon: 'fas fa-clipboard-list' }
]

const handleLogout = () => {
  authStore.logout()
  router.push('/login')
}
</script>

<style scoped>
.sidebar {
    width: 280px; /* 侧边栏宽度 */
    transition: all 0.3s; /* 过渡动画 */
    box-shadow: 4px 0 10px rgba(0, 0, 0, 0.1); /* 右侧阴影 */
    position: fixed; /* 固定定位 */
    top: 0;
    left: 0;
    height: 100%;
    background-color: #1a202c; /* 深灰色背景 */
    color: white; /* 文字颜色 */
    display: flex; /* Add flex to manage content layout */
    flex-direction: column; /* Stack items vertically */
}

/* 确保导航项之间的空间分配 */
.sidebar nav {
    flex-grow: 1; /* Navigation takes up available space */
}

/* 侧边栏导航项 */
.nav-item {
    transition: all 0.3s; /* 过渡动画 */
    border-radius: 8px; /* 圆角 */
    margin: 4px 0; /* 上下间距 */
    padding: 0.75rem 1rem; /* 内边距 */
    display: flex; /* 弹性布局 */
    align-items: center;
    color: #a0aec0; /* 默认文字颜色（浅灰色） */
}

/* 导航项悬停效果 */
.nav-item:hover {
    background-color: rgba(255, 255, 255, 0.1); /* 半透明背景 */
    transform: translateX(5px); /* 向右偏移 */
    color: white; /* 文字变白 */
}

/* 激活状态的导航项 */
.active-nav { /* Using active-nav as defined in template */
    background-color: rgba(255, 255, 255, 0.2); /* 更深的半透明背景 */
    color: white; /* 文字变白 */
}

/* 侧边栏标题和图标 */
.sidebar .p-6 {
    padding: 1.5rem; /* 内边距 */
}

.sidebar .flex.items-center.space-x-3.mb-10 {
    margin-bottom: 2.5rem; /* 底部间距 */
}

.sidebar .fas.fa-paw {
    color: #a3bffa; /* 图标颜色（淡蓝色） */
    font-size: 1.5rem; /* 图标大小 */
}

.sidebar h1 {
    font-size: 1.25rem; /* 标题大小 */
    font-weight: bold;
}

/* Logout Button Container */
.logout-button-container {
   /* Removed absolute positioning styles */
   /* margin-top: auto; added in template */
   /* margin-left/right/bottom handled by template classes */
}

.main-content {
  margin-left: 280px;
  transition: all 0.3s;
  background-color: #f8f9fa; /* 保持与后端主内容区背景色一致 */
}

/* Add styles for the logout button to match the screenshot */
.sidebar .logout-button-container button {
    background-color: #dc3545; /* Bootstrap danger color */
    border: none;
}

.sidebar .logout-button-container button:hover {
    background-color: #c82333; /* Darker danger color on hover */
}
</style>